<template>
    <title :title="noticeTitle" :more="true" target-url="/pages/parkNotice/index"></title>
    <view class="notice">
        <view v-if="noticeData.length">
            <view class="noticeList" v-for="(item, index) in noticeData" :key="index" @click="detail(item)">
                <view class="information">
                    <view class="spot"><span>·</span></view>
                    <view class="name">
                        {{ item.title }}
                    </view>
                </view>
                <view class="dateTime">
                    {{ formatTime(item.publish_date) }}
                </view>
            </view>
        </view>

        <up-empty v-else mode="data" iconSize="40rpx" text="暂无园区通知信息">
        </up-empty>

    </view>
</template>

<script>
import dayjs from 'dayjs';
import title from '@/components/title/index.vue'
import { getCategoryList } from '@/api/api.js'
export default {
    name: 'ParkNotice',
    components: {
        title
    },
    data() {
        return {
            noticeTitle: '园区通知',
            noticeData: []
        }
    },
    created() {
        this.getNoticeData()
    },
    methods: {
        // 获取园区通知数据
        async getNoticeData() {
            try {
                const data = {
                    category_name: '园区通知',
                    limit: 5,
                    page: 1
                }
                const res = await getCategoryList(data);
                if (res.code == 2000) {
                    this.noticeData = res.data.data;
                }
            } catch (error) {
                console.log(error);
            }
        },
        detail(item) {
            uni.setStorageSync('currentData', { item: item, isTitle: false })
			uni.navigateTo({
				url: '/pages/contentDetail/index'
			})
        },
        formatTime(time) {
			return dayjs(time).format('YYYY年MM月DD日');
		},
    }
}
</script>

<style lang="scss" scoped>
.notice {
    height: auto;
    background-color: #fefefe;
    border-radius: 10rpx;
    box-shadow: 3rpx 3rpx 15rpx 1rpx rgba(0, 0, 0, 0.1);
    padding: 30rpx;

    .noticeList {
        margin-bottom: 25rpx;

        .information {
            display: flex;
            align-items: center;

            .spot {
                width: 15rpx;
                font-weight: bold;
                color: #ff4542;
                margin-right: 5rpx;
            }

            .name {
                font-size: 25rpx;
                font-weight: 500;
                color: #2d2a31;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .dateTime {
            margin-top: 10rpx;
            font-size: 22rpx;
            color: #9097ba;
            text-indent: 1em;
        }
    }

    .noticeList:last-child {
        margin-bottom: 0;
    }
}
</style>